<template>
  <div class="tabs-container">
    <el-row class="full-size-row">
      <el-col :span="24" class="full-size-col">
        <el-card class="full-size-card">
          <el-tabs v-model="activeTab" class="full-size-tabs">
            <el-tab-pane label="运行日志" name="allLog">
              <DeviceAllLog :qtCall="qtCall"></DeviceAllLog>
            </el-tab-pane>
            <el-tab-pane label="预警日志" name="errorLog">
              <DeviceErrorLog :qtCall="qtCall"></DeviceErrorLog>
            </el-tab-pane>
            <el-tab-pane label="运行状况统计" name="status">
              <DeviceRunningStatus ref="deviceRunningStatus" :qtCall="qtCall"></DeviceRunningStatus>
            </el-tab-pane>
            <el-tab-pane label="日志转换规则" name="rules">
              <DeviceRules :qtCall="qtCall"></DeviceRules>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import qwebchannel from "../../qt5.15webchannel";

import DeviceAllLog from "./DeviceAllLog.vue";
import DeviceErrorLog from "./DeviceErrorLog.vue";
import DeviceRunningStatus from "./DeviceRunningStatus.vue";
import DeviceRules from "./DeviceRules.vue";

export default {
  components: {
    DeviceAllLog,
    DeviceErrorLog,
    DeviceRunningStatus,
    DeviceRules
  },
  data() {
    return {
      activeTab: 'allLog',
      qtCall: null
    };
  },
  mounted() {
    // setInterval(() => {
    //       try {
    //         console.log('heart-test','heart')
    //         this.qtCall.JsToQt("HeartTest", {})//NeedRefreshRealData
    //       } catch (error) {
    //         console.log('HeartTest',error)
    //       }
    //     }, 5000);
    // 初始化 QWebChannel
    if (process.env.NODE_ENV === 'production') {
      // new qwebchannel.QWebChannel(qt.webChannelTransport, (channel) => {
      //   this.qtCall = channel.objects.webBridge;
      //   console.log("qtCall: ", this.qtCall);
      // })
      this.qtCall = this.$qtCall
    }
  }
};
</script>

<style>
.el-card__body, .el-main {
  padding: 10px !important;
}

.tabs-container {
  width: 100%;
  height: 83vh; /* 视口高度 */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止内容溢出 */
}

.full-size-row {
  width: 100%;
  height: 100%;
  margin: 0; /* 取消默认的边距 */
}

.full-size-col {
  width: 100%;
  height: 100%;
}

.full-size-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box; /* 包含内边距和边框 */
}

.full-size-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box; /* 包含内边距和边框 */
}

.full-size-tabs .el-tabs__content {
  flex: 1;
  box-sizing: border-box; /* 包含内边距和边框 */
}

.el-tabs__item {
  text-align: center;
  font-size: 16px;
  border-bottom: 1px solid #ECEEF1;
  font-weight:bold;
  color:#2A2A2A
}
</style>
